import React from "react";
import {observer, inject} from 'mobx-react';
import {withRouter,Route} from 'react-router-dom';
import {Tools, Toast} from "weaver-mobile";
import { Button,Icon } from 'weaver-mobile';
import {toJS} from 'mobx';

import {RouteLayout} from 'weaver-mobile-page';
import UpdateOperator from "./updateOperatorContent";
import UpdateOperateAdvanceSearch from './updateOperateAdvanceSearch';
import UpdateOperatorFlowAdd from "./updateOperatorFlowAdd";
import * as mobx from "mobx";

const getLabel = Tools.getLabel;

@withRouter
@inject("odocComsStore", "updateOperatorStore")
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }
    componentWillMount(){
        const {updateOperatorStore,location, odocComsStore} = this.props;
        const {init} = updateOperatorStore;
        const {pathname=""} = location;
		let {requestParam = {}} = odocComsStore;
		requestParam = mobx.toJS(requestParam);
		delete requestParam.markInfo;
        init(requestParam, pathname);
    }

    //组件卸载
	componentWillUnmount(){
		const {updateOperatorStore} = this.props;
		const { destory ,changenumber=0} = updateOperatorStore;
		destory && typeof destory == "function" && (destory());
		if(changenumber>0) {//刷新表单
			const  globalStore = window.WfForm.getGlobalStore() || {};
			const {urlParams = {}} = globalStore;
			window.WfForm && window.WfForm.reloadPage(urlParams);
		}
	}

	render() {
        const {updateOperatorLayout, flowAddLayout} = this.props.updateOperatorStore;
        return (
            <div style={{"height":"100%"}}>
                <div className={"updateOperator-button"}>
                    {this.getTopButtons()}
                </div>
                <UpdateOperator/>
                <Route
                    key={updateOperatorLayout.id}
                    path={updateOperatorLayout.path}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout"
                            >
                                <UpdateOperateAdvanceSearch/>
                            </div>
                        </RouteLayout>
                    )}
                />
                <Route
                    key={flowAddLayout.id}
                    path={flowAddLayout.path}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout"
                            >
                                <UpdateOperatorFlowAdd/>
                            </div>
                        </RouteLayout>
                    )}
                />
            </div>
        );
    }

    /**
     * 顶部添加流转按钮
     */
    getTopButtons=()=>{
        const {history,updateOperatorStore} = this.props;
        const {updateOperatorLayout,flowAddLayout} = updateOperatorStore;
        let btns = [
            <Button style={{width:"calc(100% - 50px)"}} onClick={()=>{
                history.push({
                    pathname: flowAddLayout.path,
                    state:{dialogType:1,title:getLabel(520038, "添加流转")}
                });
            }}><Icon key="plus" type="plus" size={'xs'} style={{"vertical-align": "middle",margin:"-2px 10px 0 0"}}/>{getLabel(520038, "添加流转")}</Button>,
            <Button onClick={()=>{
                history.push({
                    pathname: updateOperatorLayout.path,
                    state:{dialogType:1,title:getLabel(347, "高级搜索")}
                });
            }}><Icon key="filter-o" type="filter-o" size={'xs'} style={{"vertical-align": "middle"}}/></Button>
        ]
        return btns;
    }

    /**
     * 取消
     */
    onCancel = () => {
        window && window.historyRoute && window.historyRoute.go && (window.historyRoute.go(-1));
    }
}